<template>
  <view class="pageLayout" v-if="info">
    <view class="title_box">
      <view class="title">{{ info.approveTopic }}</view>
      <view class="contain">{{ info.approveContent }}</view>
      <view class="time">发起时间：{{ info.startTime }}</view>
      <view class="detail_box">
        <view class="detail_item_box">
          <view class="top">参与人</view>
          <view class="user_name">{{ info.attendRealName }}</view>
        </view>
        <view class="detail_item_box" v-if="info.approveImage">
          <view class="top">计划图片</view>
          <view class="link" @click="showQRCode()">点击查看</view>
        </view>
      </view>
    </view>
    <view class="progress_box">
      <view class="header">审批进度</view>
      <view
        class="progress_contain"
        v-for="(item, index) in progressList"
        :key="index"
      >
        <view class="progress_item">
          <view class="avatar">
            <image :src="item.avatar" mode="widthFix"></image>
            <view class="icon" v-if="item.status != 'default'">
              <u-icon
                size="28rpx"
                name="checkmark-circle-fill"
                color="#14A861"
                v-if="item.status == 'success'"
              ></u-icon>
              <u-icon
                v-else-if="item.status == 'error'"
                size="28rpx"
                name="close-circle-fill"
                color="#A22C26"
              ></u-icon>
            </view>
          </view>
          <view class="progress_detail_box">
            <view class="name">{{ item.name ? item.name : "" }}</view>
            <view class="progress_detail_bottom">
              <view class="role">{{ item.role ? item.role : "" }}</view>
              <view class="time">{{ item.time ? item.time : "-" }}</view>
            </view>
            <view class="result" v-if="item.rejectContent">{{
              item.rejectContent
            }}</view>
          </view>
        </view>
        <view class="border" v-if="index != progressList.length - 1"></view>
      </view>
    </view>
    <view class="bot_btn">
      <view class="btn_width" ref="btnBox">
        <u-button
          v-if="
            (info.adminType == 'ChengZong' &&
              chengzongList.includes(info.approveProcessState)) ||
            (info.adminType == 'TopAdmin' &&
              sonzongList.includes(info.approveProcessState))
          "
          class="btn"
          :loading="loading"
          @click="rejectApprove"
          color="#a22d27"
          :plain="true"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;font-weight:700;border-radius: 12rpx;"
          >驳回</u-button
        >
        <u-button
          v-if="
            (info.adminType == 'ChengZong' &&
              chengzongList.includes(info.approveProcessState)) ||
            (info.adminType == 'TopAdmin' &&
              sonzongList.includes(info.approveProcessState))
          "
          class="btn"
          :loading="loading"
          @click="agreeApprove"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;border-radius: 12rpx;"
          >同意</u-button
        >
      </view>
    </view>
    <u-popup :show="showReject" @close="closeForm" mode="bottom">
      <view class="pop_box">
        <view class="title">驳回原因</view>
        <u--form
          labelPosition="left"
          :model="agreeForm"
          :rules="agreeRules"
          ref="AgreeForm"
          :labelStyle="labelStyle"
        >
          <view class="base_info" style="height: 60vh">
            <u-form-item labelPosition="top" prop="content">
              <u--textarea
                v-model="agreeForm.content"
                border="none"
                height="398rpx"
                placeholder="请输入驳回原因"
              ></u--textarea>
            </u-form-item>
          </view>
        </u--form>
        <view>
          <u-button
            :loading="loading"
            @click="submitAgree"
            color="#a22d27"
            customStyle="padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;margin-top:20rpx;boder-radius: 12rpx;"
            >驳回</u-button
          >
        </view>
      </view>
    </u-popup>
    <u-modal
      :show="showModel"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <view class="slot-content">
        <view class="title">温馨提示</view>
        <view class="content">您确定要通过该申请吗？</view>
        <view class="btn_box">
          <view class="cancel" @click="showModel = false">取消</view>
          <view class="confirm" @click="submitAgree">确定</view>
        </view>
      </view>
    </u-modal>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import {
  queryApproveDetailByID,
  reject,
  approve,
} from "../api/approval/index.js";
import myPicker from "@/components/myPicker";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    myPicker,
    mytoast
  },
  data() {
    return {
      id: "",
      info: null,
      progressList: [],
      chengzongList: ["Commit"],
      sonzongList: ["Commit", "OneReject", "OnePass"],
      agreeForm: {
        content: "",
        approveID: "",
      },
      showReject: false,
      showModel: false,
      agreeRules: {
        content: [
          {
            type: "string",
            required: false,
            message: "审批意见",
            trigger: ["blur"],
          },
        ],
      },
      type: 1,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 关闭弹窗
     *
     */
    closeForm() {
      this.agreeForm = {
        content: "",
        approveID: "",
      };
      this.showReject = false;
      this.$refs.AgreeForm.resetFields();
    },
    /**
     * 拒绝
     */
    rejectApprove() {
      this.agreeForm.approveID = this.id;
      this.type = 1;
      this.showReject = true;
    },
    /**
     * 同意
     */
    agreeApprove() {
      this.agreeForm.approveID = this.id;
      this.type = 2;
      this.showModel = true;
      // this.showReject = true;
    },
    /**
     * 审核
     */
    async submitAgree() {
      // let action = await this.$refs.AgreeForm.validate();
      let data = {
        ...this.agreeForm,
      };
      console.log(data, this.type);
      // setTimeout(() => {
      //   uni.navigateBack({ delta: 1 });
      // }, 1000);
      // console.log(data, "data");

      // return;
      this.loading = true;
      if (this.type == 1) {
        reject(data)
          .then((res) => {
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: "操作成功",
              duration: 3000,
              position: "center",
            });
            this.closeForm();
            this.getInfo();
            setTimeout(() => {
              uni.navigateBack({ delta: 1 });
            }, 800);
          })
          .catch((e) => {
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 3000,
              position: "center",
            });
          });
      } else if (this.type == 2) {
        approve(data)
          .then((res) => {
            this.showModel = false;
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: "操作成功",
              duration: 3000,
              position: "center",
            });
            this.closeForm();
            this.getInfo();
            setTimeout(() => {
              uni.navigateBack({ delta: 1 });
            }, 800);
          })
          .catch((e) => {
            this.loading = false;
            this.$refs.toastRef.showToast({
              msg: e.data.detail,
              duration: 3000,
              position: "center",
            });
          });
      }
      // console.log(this.form, "this.form");
    },
    /**
     * 获取详情
     */
    getInfo() {
      let data = {
        approveID: this.id,
      };
      queryApproveDetailByID(data).then((res) => {
        console.log(res, "getInfo");
        this.info = res.data;
        if (res.data.oneApproveID) {
          let statusMap = new Map([
            ["Commit", "default"],
            ["ProcessCancel", "default"],
            ["Cancel", "default"],
            ["OneReject", "error"],
            ["OnePass", "success"],
            ["TwoReject", "success"],
            ["TwoPass", "success"],
            ["ProcessBegin", "success"],
            ["ProcessEnd", "success"],
            ["OverdueEnd", "success"],
          ]);
          this.progressList[0] = {
            name: res.data.oneApproveName,
            role: "副总经理",
            time: res.data.oneApproveTime,
            rejectContent: res.data.oneRejectContent,
            avatar:
              this.buildImgurl + "YY/image/2025/06/程佳慧18173602_7757.jpg",
            status: statusMap.get(res.data.approveProcessState),
          };
        }
        if (res.data.twoApproveID) {
          let statusMap = new Map([
            ["Commit", "default"],
            ["ProcessCancel", "default"],
            ["Cancel", "default"],
            ["OneReject", "error"],
            ["OnePass", "default"],
            ["TwoReject", "error"],
            ["TwoPass", "success"],
            ["ProcessBegin", "success"],
            ["ProcessEnd", "success"],
            ["OverdueEnd", "success"],
          ]);
          this.progressList[1] = {
            name: res.data.twoApproveName,
            role: "总经理",
            time: res.data.twoApproveTime,
            rejectContent: res.data.twoRejectContent,
            avatar:
              this.buildImgurl +
              (res.data.enterpriseID == 1
                ? "YY/image/2025/06/孙总18174225_1426.jpg"
                : "YY/image/2025/06/黑哥18173736_9045.jpg"),
            status: statusMap.get(res.data.approveProcessState),
          };
        }
        console.log(this.progressList, "this.progressList");
      });
    },
    /**
     * 展示二维码
     */
    showQRCode() {
      uni.previewImage({
        urls: [this.imgUrl + "/" + this.info.approveImage],
      });
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getInfo();
  },
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.AgreeForm.setRules(this.agreeRules);
  },
};
</script>

<style lang="scss" scoped>
.pageLayout {
  padding: 24rpx;
  box-sizing: border-box;
}
.title_box {
  border-bottom: 2rpx solid #f0f0f0;
  padding-bottom: 50rpx;
  padding-bottom: 40rpx;
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20rpx;
  }
  .contain {
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8rpx;
  }
  .time {
    color: #c8c9cc;
    font-size: 26rpx;
    margin-bottom: 40rpx;
  }
  .detail_box {
    display: flex;
    .detail_item_box {
      margin-right: 106rpx;
      .top {
        font-size: 24rpx;
        color: #c8c9cc;
        margin-bottom: 16rpx;
      }
      .user_name {
        font-size: 26rpx;
        color: #000000;
        font-weight: bold;
      }
      .link {
        font-size: 26rpx;
        color: #3C6FDF;
        font-weight: bold;
      }
    }
  }
}
.progress_box {
  padding: 60rpx 0;
  .header {
    font-size: 28rpx;
    font-weight: bold;
    color: #000000;
    margin-bottom: 40rpx;
  }
  .progress_contain {
    margin-bottom: 14rpx;
    position: relative;
    margin-bottom: 106rpx;
    .border {
      position: absolute;
      left: 0rpx;
      bottom: -106rpx;
      height: 100%;
      border-left: 3rpx dashed #a22c26;
      margin-left: 40rpx;
      margin-bottom: 14rpx;
      border-spacing: 5px;
      width: 3rpx;
    }
    .progress_item {
      display: flex;
      .avatar {
        position: relative;
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
        margin-right: 32rpx;
        image {
          width: 76rpx;
          height: 76rpx;
          border-radius: 8rpx;
        }
        .icon {
          width: 28rpx;
          height: 28rpx;
          border-radius: 50%;
          background-color: #ffffff;
          position: absolute;
          right: 0rpx;
          bottom: 0rpx;
        }
      }
      .progress_detail_box {
        flex: 1;
        .name {
          font-size: 30rpx;
          color: #000000;
        }
        .progress_detail_bottom {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .role {
            font-size: 24rpx;
            color: #c8c9cc;
          }
          .time {
            font-size: 26rpx;
            color: #c8c9cc;
          }
        }
        .result {
          padding: 18rpx 20rpx;
          background-color: #f5f5f5;
          font-size: 26rpx;
          color: #000000;
          margin-top: 38rpx;
        }
      }
    }
  }
}
.bot_btn {
  position: relative;
  // background-color: #d52227;
  border-top: 1rpx solid #801c1b26;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 40rpx;
  // box-shadow: #a5a5a5 0px 0px 6px;
  padding: 20rpx;
  padding-bottom: 50rpx;
  background-color: white;
  box-sizing: border-box;
  .btn_width {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
.pop_box {
  background-color: #f6f6f6;
  padding: 40rpx 24rpx;
  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 40rpx;
  }
}
.slot-content {
  text-align: center;
  width: 100%;
  .title {
    font-size: 32rpx;
    color: #969799;
    margin-bottom: 32rpx;
  }
  .content {
    color: #000000;
    font-size: 30rpx;
  }
  .btn_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 72rpx;
    .cancel {
      width: 260rpx;
      height: 88rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #000;
      background-color: #f5f5f5;
    }
    .confirm {
      width: 260rpx;
      height: 88rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #fff;
      background-color: #a22c26;
    }
  }
}
</style>
